<template>
   <el-row>
       <el-row class="container">
        <el-row class="main" @click.native="showSeatInfos = !showSeatInfos">
           <el-col :span="6" class="air-name">{{airData.airline_name}} {{airData.flight_no}}</el-col>
           <el-col :span="6" class="start-col">
               <el-row class="start">
                   <span>{{airData.dep_time}}</span>
                   <b>{{airData.org_airport_name}} {{airData.org_airport_quay}}</b>
               </el-row>
           </el-col>
           <el-col :span="6" class="end-col">
               <el-row class="end">
                   <span>{{airData.arr_time}}</span>
                   <b>{{airData.dst_airport_name}} {{airData.dst_airport_quay}}</b>
               </el-row>
           </el-col>
           <el-col :span="6" class="air-price">
               <span>￥<b>{{airData.base_price}}</b>起</span>
           </el-col>
           <div class="time">{{duration}}</div>
        </el-row>
        <!-- 这里隐藏显示座位使用了动画效果 -->
        <el-collapse-transition>
            <el-row class="item-list" v-if="airData.seat_infos && showSeatInfos">
            <el-col :span="4" class="left">
                低价推荐
            </el-col>
            <el-col :span="20" class="right">
                <el-row class="cabin" v-for="(seat,index) in airData.seat_infos" :key="index">
                    <el-col :span="14" class="cabin-info">
                        <span class="cabin-name">
                            <em>{{seat.name}}</em> |
                            <b>{{seat.supplierName}}</b>
                        </span>
                    </el-col>
                    <el-col :span="5" class="price">
                        <span>￥ {{seat.par_price}}</span>
                    </el-col>
                    <el-col :span="5" class="option">
                        <el-row class="opt">
                            <span @click="$router.push('/ticket/SubmitOrder?id='+airData.id +'&seat_xid='+seat.seat_xid)">选定</span>
                            <em>剩余：{{seat.discount}}</em>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
            </el-row>
        </el-collapse-transition>
    </el-row>
   </el-row>
</template>

<script>
export default {
    props:{
        airData:{
            type:Object,
            //默认返回空数组
            default:() => {
                return {};
            }
        }
    },
    data(){
        return{
            showSeatInfos:false
        }
    },
    computed:{
        duration(){
            // 1. 先转为分钟
            let arrArr = this.airData.arr_time.split(':');
            let arrMint = Number(arrArr[0])*60 + Number(arrArr[1]);

            let depArr = this.airData.dep_time.split(':');
            let depMint = Number(depArr[0])*60 + Number(depArr[1]);

            let diffMint = arrMint - depMint;

            // 对于跨越凌晨的航班来说, 由于刚好零点的时间计算有出入, 会少了 24 小时, 变成负数, 
            // 一旦发现负数, 就重新加上 24 小时即可
            if(diffMint < 0){
                diffMint += 24*60;
            }
            return Math.floor(diffMint/60) + '小时' + diffMint % 60 + '分钟';
        }
    }
}
</script>

<style lang="less" scoped>
.container{
   margin:10px 0;
}
.main{
    position: relative;
    height: 84px;
    border:1px solid #DDDDDD;
    background-color: #fff;
    cursor: pointer;
    .air-name{
        height:100%;
        text-align: center;
        line-height: 84px;
        font-size: 14px;
        color: #000;
    }
    .start-col{
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .start{
        display: flex;
        flex-direction: column;
        align-items: center;
            span{
                font-size: 22px;
                color: #000;
                font-weight: 500;
            }
            b{
                font-size: 12px;
                color: #999999;
                font-weight: 400;
            }
        }
    }
    .end-col{
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .end{
        display: flex;
        flex-direction: column;
        align-items: center;
            span{
                font-size: 22px;
                color: #000;
                font-weight: 500;
            }
            b{
                font-size: 12px;
                color: #999999;
                font-weight: 400;
            }
        }
    }
    .air-price{
        box-sizing: border-box;
        height:100%;
        text-align: center;
        line-height: 84px;
        font-size: 14px;
        color: #000;
        b{
            font-size: 22px;
            color: #FFA000;
            font-weight: 480;
        }
    }
    .time{
       position: absolute;
       left: 340px;
       top: 15px;
       width:70px;
       text-align: center;
       line-height: 38px;
       height: 38px;
       font-size: 12px;
       color: #999999;
       border-bottom: 1px solid #EEEEEE;
    }
}
.item-list{
    background-color: #F6F6F6;
    border:1px solid #DDDDDD;
    border-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
        margin-left: 18px;
        color: #000;
        font-size: 14px;
    }
    .right{
        .cabin{
            height: 72px;
            border-bottom: 1px solid #EEEEEE;
            &:last-child{
                border-bottom:0;
            }
            .cabin-info{
                height: 100%;
                line-height: 72px;
                .cabin-name{
                    em{
                        font-size: 12px;
                        color: #00821A;
                        font-style: normal;
                    }
                    b{
                        font-size: 12px;
                        color: #000000; 
                        font-weight: 400;
                    }
                }
            }
        }
    }
    .price{
        height:100%;
        line-height: 72px;
        span{
          font-size: 20px;
          color: #FFA000;
        }
    }
    .option{
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .opt{
            display: flex;
            flex-direction: column;
            align-items: center;
            span{
                width: 74px;
                height:30px;
                text-align: center;
                line-height: 30px;
                font-size: 12px;
                color: #fff;
                background-color: #F59F34;
                border-radius: 5px;
                cursor: pointer;
            }
            em{
                margin-top: 5px;
                font-size: 14px;
                color: #666666;
                font-style: normal;
            }
        }
    }
}
</style>